<template>
    <div id="app" class="main-box">
        <div ref="chartRef" class="charts-box"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            chartInstance: null, // 用于存储 ECharts 实例
        };
    },
    mounted() {
        this.initChart();
    },
    methods: {
        initChart() {
            // 通过 this.$echarts 获取全局注册的 ECharts
            this.chartInstance = this.$echarts.init(this.$refs.chartRef);

            const option = {
                backgroundColor: "#0b1f42", // 深蓝色背景
                grid: {
                    top: "6%",
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: {
                    type: "category",
                    data: [
                        "签就业协议",
                        "国内升学",
                        "国外留学",
                        "签劳动合同",
                        "自由职业",
                        "自主创业",
                        "其他录用形式就业",
                    ],
                    axisLine: {
                        lineStyle: {
                            color: "#ffffff", // 白色坐标轴线
                        },
                    },
                    axisLabel: {
                        color: "#ffffff", // 白色标签
                        fontSize: 6,
                    },
                },
                yAxis: {
                    type: "value",
                    min: 0,
                    max: 40,
                    interval: 10,
                    axisLine: {
                        show: true,
                    },
                    splitLine: {
                        show: false, // 隐藏网格线
                    },
                    axisLabel: {
                        color: "#ffffff", // 白色标签
                        formatter: "{value}%",
                    },
                },
                series: [
                    {
                        name: "比例",
                        type: "bar",
                        barWidth: "30%", // 调整柱条宽度
                        data: [34.24, 7.98, 0.96, 0.5, 0.3, 0.28, 0.07],
                        itemStyle: {
                            // 使用渐变色
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                { offset: 0, color: "#00c1de" },
                                { offset: 1, color: "#00e3a2" },
                            ]),
                            barBorderRadius: [20, 20, 0, 0], // 圆顶效果，顶部圆角
                        },

                        label: {
                            show: true,
                            position: "top",
                            color: "#ffffff", // 白色数据标签
                            formatter: "{c}%",
                            fontSize: 12,
                        },
                    },
                ],
            };

            // 设置图表的配置项
            this.chartInstance.setOption(option);
        },
    },
};
</script>

<style lang="less" scoped>
.main-box {
    width: 100%;
    height: 80%;
    background-color: #0b1f42;
}

.charts-box {
    width: 100%;
    height: 100%;
}
</style>
